<template>
  <div class="app-container">
    <div v-show="currentView === 1">
      <div v-if="!isEdit">
        <el-button v-if="!disableEditSubmit" class="btncolor" style="margin-bottom: 10px;"  @click="editWbs" icon="el-icon-plus">编辑</el-button>
        <el-radio-group v-model="currentView" style="float: right;" @input="toggleView">
          <el-radio-button :label="1"><svg-icon icon-class="wbslist"/></el-radio-button>
          <el-radio-button :label="2"><svg-icon icon-class="gantt-menu"/></el-radio-button>
        </el-radio-group>
        <el-button type="text" v-show="currentView === 1" style="float: right;margin-right: 10px;" @click="loadData" icon="el-icon-refresh">刷新</el-button>
      </div>
      <div v-if="isEdit">
        <div style="margin-bottom: 10px;">
          <!--          <el-steps :active="step" align-center>-->
          <!--            <el-step title="任务约束"></el-step>-->
          <!--            <el-step title="任务编辑"></el-step>-->
          <!--          </el-steps>-->
          <div style="display: flex; align-items: center;">
            <div style="flex: 1; display: flex; align-items: center; justify-content: center;">
              <div class="lose"></div>
              <span style="margin-left: 8px;">任务失效</span>
              <div class="readonly" style="margin-left: 30px;"></div>
              <span style="margin-left: 8px;">任务只读</span>
            </div>
            <div style="display: flex; align-items: center;">
              <el-switch v-if="isEdit" style="margin-left: 8px;" v-model="showValidTask" inactive-text="只看有效任务" @change="changeShowValidTask"></el-switch>
              <!--              <el-button v-if="isEdit && step === 1" class="btncolor" style="margin-left: 8px;" @click="flowSkip" icon="el-icon-scissors">流程裁剪</el-button>-->
            </div>
          </div>
        </div>
        <el-form :model="{ editdatas: editTaskList }" :rules="baseRules" ref="saveDataForm">
          <el-table class="tl-table" :height="mainHeight -120" :header-cell-style="{ fontSize: '12px' }" size="small" ref="mainTable1" resizable-key="tableHeight" :resizable-refs="tableResizeRefs" v-loading="loading" :data="editTaskList" @selection-change="doSelectChange" @sort-change="doSortChange" row-key="id" border fit :row-class-name="doChangeRowClassName">
            <el-table-column type="" prop="index" label="序号" align="left" header-align="center" width="70px" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="taskname" label="任务名称" min-width="150px" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span :style="{ marginLeft: scope.row.children.length <= 0 && scope.row.level === 1 ? '23px' : '0px'}">{{ scope.row.taskname }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="code" label="任务编号" width="170px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="responsibleusername" label="责任人" width="100px" align="left" header-align="center" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span v-if="scope.row.responsibleusername">{{ `${scope.row.responsibleusername ? scope.row.responsibleusername : ''}[${scope.row.responsibleusercode ? scope.row.responsibleusercode : ''}]` }}</span>
                <span v-else-if="scope.row.children.length <= 0 && scope.row.status !== 4" style="color: red;">待确认</span>
                <span v-else></span>
              </template>
            </el-table-column>
            <el-table-column width="170px" align="center" header-align="center">
              <template v-slot:header>
                <span style="color:red">*</span>计划开始时间
              </template>
              <template slot-scope="scope">
                <el-form-item v-if="showEdit(scope.row)" style="margin: 0; text-align: center;">
                  <el-date-picker style="width:100%" v-model="scope.row.planbegintime" type="date" value-format="yyyy-MM-dd 00:00:00" placeholder="计划开始时间" :picker-options="pickerOptions" @change="changePlanTime(scope.row)" :disabled="!planDateEdit(scope.row)"> </el-date-picker>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column width="170px" align="center" header-align="center">
              <template v-slot:header>
                <span style="color:red">*</span>计划结束时间
              </template>
              <template slot-scope="scope">
                <el-form-item v-if="showEdit(scope.row)" style="margin: 0; text-align: center;">
                  <el-date-picker style="width:100%" v-model="scope.row.planendtime" type="date" value-format="yyyy-MM-dd 00:00:00" placeholder="计划结束时间" :picker-options="pickerOptions" @change="changePlanTime(scope.row)" :disabled="!planDateEdit(scope.row)"> </el-date-picker>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="任务状态" width="100px" align="center" header-align="center">
              <template slot-scope="scope">
                <div class="circle-wrapper">
                  <div :class="getCircleClass(scope.row)"></div>
                  <span style="margin-left: 8px;"> {{ scope.row.dispstatus }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="realbegintime" label="实际开始时间" width="120px" align="center" header-align="center" :formatter="dateFormat" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="realendtime" label="实际结束时间" width="120px" align="center" header-align="center" :formatter="dateFormat" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="pretaskname" label="前置任务" min-width="120px" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="操作" width="85px" align="center" fixed="right">
              <template slot-scope="scope" v-if="showEdit(scope.row)">
                <el-dropdown trigger="click">
                  <el-button type="text" icon="el-icon-s-operation" :disabled="isDisabled(scope.row)">更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
                  <el-dropdown-menu>
                    <el-dropdown-item @click.native="openAddLabourTask(0, scope.row)" v-if="(scope.row.nodetype === 1 || scope.row.parentcode !== '0')" :disabled="formItemEdit(scope.row)">新增同级任务</el-dropdown-item>
                    <el-dropdown-item @click.native="openAddLabourTask(1, scope.row)" :disabled="formItemEdit(scope.row)">新增子任务</el-dropdown-item>
                    <el-dropdown-item v-if="scope.row.source !== 0" @click.native="openEditLabourTask(scope.row)" :disabled="formItemEdit(scope.row)">编辑</el-dropdown-item>
                    <el-dropdown-item v-if="scope.row.source !== 0 && !editProjectAble" @click.native="deleteTaskNode(scope.row.id)" :disabled="formItemEdit(scope.row)">删除</el-dropdown-item>
                    <el-dropdown-item v-if="scope.row.source !== 0 && editProjectAble" @click.native="closeTask(scope.row)" :disabled="formItemEdit(scope.row)">关闭</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
        <div style="background-color: white;height: 70px;">
          <div style="float: right;margin-top: 30px;">
            <el-button class="btncolor" @click="cancel">取消</el-button>
            <!--            <el-button type="primary" v-if="step === 1" @click="changeActive(2)" icon="el-icon-plus">保存并下一步</el-button>-->
            <!--            <el-button type="primary" v-if="step === 2" @click="changeActive(1)">返回上一步</el-button>-->
            <el-button type="primary" v-if="step === 2" style="margin-left: 10px;" :loading="saveLoading" @click="publishWbs" icon="el-icon-plus">保存WBS</el-button>
            <el-button type="primary" v-if="step === 2 && !isApproval" style="margin-left: 10px;" :loading="saveLoading" @click="deliveryWbs" icon="el-icon-finished">发布WBS</el-button>
          </div>
        </div>
      </div>
      <el-table v-show="!isEdit" v-loading="loading" ref="mainTable" :disabled="true" :height="mainHeight -100" resizable-key="tableHeight" :resizable-refs="['search', 'toolbar']" :data="taskList" class="tl-table" @selection-change="doSelectChange" @sort-change="doSortChange" @row-dblclick="doRowClick" @row-click="doRowClick" row-key="id" border fit :row-class-name="doChangeRowClassName" :default-sort="{ prop: 'sortcode', order: 'ascending' }">
        <el-table-column prop="index" label="序号" type="" align="center" header-align="center" width="70px" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="taskname" label="任务名称" min-width="150px" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span :style="{ marginLeft: scope.row.children.length <= 0 && scope.row.level === 1 ? '23px' : '0px'}">{{ scope.row.taskname }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="code" label="任务编号" width="170px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="responsibleusername" label="责任人" width="100px" align="left" header-align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span v-if="scope.row.responsibleusername">{{ `${scope.row.responsibleusername ? scope.row.responsibleusername : ''}[${scope.row.responsibleusercode ? scope.row.responsibleusercode : ''}]` }}</span>
            <span v-else-if="scope.row.children.length <= 0 && scope.row.status !== 4" style="color: red;">待确认</span>
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column prop="planbegintime" label="计划开始时间" width="170px" align="center" header-align="center" :formatter="dateFormat" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="planendtime" label="计划结束时间" width="170px" align="center" header-align="center" :formatter="dateFormat" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="status" label="任务状态" width="100px" align="center" header-align="center">
          <template slot-scope="scope">
            <div class="circle-wrapper">
              <div :class="getCircleClass(scope.row)"></div>
              <span style="margin-left: 8px;"> {{ scope.row.dispstatus }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="realbegintime" label="实际开始时间" width="120px" align="center" header-align="center" :formatter="dateFormat" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="realendtime" label="实际结束时间" width="120px" align="center" header-align="center" :formatter="dateFormat" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="pretaskname" label="前置任务" min-width="120px" :show-overflow-tooltip="true"></el-table-column>
      </el-table>
      <flow-skip-inst ref="flowSkipRef" title="流程裁剪" :projectuucode="projectUUCode"></flow-skip-inst>
      <labour-edit ref="labourEditRef" @newTaskInfo="insertTaskNode" @editTaskInfo="editLabourTaskInfo" :addSourceType="addSourceType" :selectInfo="selectInfo" :editTaskInfo="editTaskInfo" :haveSpecialTask="writeSpecialLimit"></labour-edit>
    </div>
    <wbs-gantt ref="wbsGanttRef" v-show="currentView === 2" :project-id="projectUUCode" :subtraction-height="appointHeight">
      <template v-slot:rightbtn>
        <el-radio-group v-model="currentView" style="float: right;margin-left: 10px">
          <el-radio-button :label="1"><svg-icon icon-class="wbslist"/></el-radio-button>
          <el-radio-button :label="2"><svg-icon icon-class="gantt-menu"/></el-radio-button>
        </el-radio-group>
      </template>
    </wbs-gantt>
  </div>
</template>

<script>
  /** mixins */
  import { mixin_list_wbstask } from '../../../components/common/mixin_list_wbstask'
  /** API方法 */
  import { putAction, getAction, postAction, deleteAction } from '@tapui/utils/http'
  // 常量
  import topscommConst from '@tapui/const/tapConst'
  import { ADD_TASK_SOURCE, TASK_TYPE, TASK_SOURCE, TASK_STATE } from "../../../const/const"
  /** 子组件 */
  import tlToolbar from '@tapui/components/Tap/List/ListToolBar'
  import flowSkipInst from '../../baseFlowSkipIns/flowSkipInst'
  import labourEdit from '../cbbPmTask/labourEdit'
  import wbsGantt from '../../ganttChart/WBSGantt'
  export default {
    name: 'cbbPmWbs',
    mixins: [mixin_list_wbstask],
    components: { tlToolbar, flowSkipInst, labourEdit, wbsGantt },
    data() {
      return {
        urlPrefix: '/cbb/pmWbs/',
        url: {
          queryCodeList: '/cbb/pmWbs/dataCodeList',
          list: '/cbb/pmWbs/queryWbsTreeList',
          saveBatchTask: '/cbb/pmTask/saveBatchTask',
          closeEditLabourTask: '/cbb/pmTask/closeEditLabourTask',
          deliveryWbs: '/cbb/pmTask/deliveryWbs'
        },
        // 排序参数
        sorterInfo: {
          sidx: 'sortcode',
          sord: 'asc'
        },
        // 数列表关联字段
        treeQueryKey: 'qry_parentid',
        queryParam: {
          uuCode: this.projectUUCode
        },
        showValidTask: false,
        taskList: [],
        editTaskList: [],
        saveLoading: false,
        step: 0,
        isEdit: false,
        pickerOptions: {
          disabledDate: (time) => {
            return time.getTime() <= (Date.now() - 60 * 60 * 24 * 1000)
          }
        },
        addSourceType: 0,
        selectInfo: {},
        editTaskInfo: {},
        currentView: 1,
        disableEditSubmit: false,
        writeSpecialLimit: false,
        isApproval: false
      }
    },
    props: {
      // 组件名称
      projectUUCode: {
        type: String,
        default: ''
      },
      appointHeight: {
        type: Number,
        default: 0
      },
      editProjectAble: {
        type: Boolean,
        default: false
      },
      mainHeight: {
        type: Number,
        default: 0
      }
    },
    methods: {
      beforeApproval(resolve, reject) {
        if (this.isEdit) {
          reject('请保存WBS并发布后再进行审批')
        } else {
          resolve()
        }
      },
      componentData() {

      },
      toggleView(type) {
        if (this.currentView === 2) {
          this.$refs.wbsGanttRef.getGanttData()
        }
      },
      // 取消
      cancel() {
        this.isEdit = false
        this.currentView = 1
      },
      deliveryWbs() {
        this.saveLoading = true
        postAction(this.url.deliveryWbs, { projectUUCode: this.projectUUCode })
          .then((res) => {
            if (res.success) {
              this.$tap.message(res.message, 'success')
              this.isEdit = false
            } else {
              this.$tap.alert(res.message, 'warning')
            }
            this.saveLoading = false
            this.$nextTick(() => {
              this.loadData({})
            })
          })
          .catch((err) => {
            this.saveLoading = false
          })
      },
      // 保存发布wbs
      publishWbs() {
        let tempData = JSON.parse(JSON.stringify(this.editTaskList))
        let tempList = this.transformList(tempData, 'toList')
        // 校验时间必填
        for (let i = 0; i < tempList.length; i++) {
          if (!tempList[i].planbegintime && tempList[i].planendtime) {
            this.$tap.alert(`任务:[${tempList[i].name}]缺少开始时间`)
            return
          } else if (tempList[i].planbegintime && !tempList[i].planendtime) {
            this.$tap.alert(`任务:[${tempList[i].name}]缺少结束时间`)
            return
          } else if (tempList[i].source === TASK_SOURCE.Artificial && !tempList[i].planbegintime && !tempList[i].planendtime) {
            // 如果是人工任务
            this.$tap.alert(`人工任务:[${tempList[i].name}]缺少开始时间、结束时间`)
            return
          }
        }
        let saveMap = {
          tasklist: tempList
        }
        if (this.editProjectAble) {
          saveMap.fromProjectEdit = 1
          saveMap.projectUUCode = this.projectUUCode
        }
        this.saveLoading = true
        putAction(this.url.saveBatchTask, saveMap)
          .then((res) => {
            if (res.success) {
              this.$tap.message(res.message, 'success')
              this.isEdit = false
            } else {
              this.$tap.alert(res.message, 'warning')
            }
            this.saveLoading = false
            this.$nextTick(() => {
              this.loadData({})
            })
          })
          .catch((err) => {
            this.saveLoading = false
          })
      },
      closeTask(row) {
        this.saveLoading = true
        postAction(this.url.closeEditLabourTask, { taskid: row.id })
          .then((res) => {
            if (res.success) {
              this.$tap.message(res.message, 'success')
              row.dispstatus = '已取消'
              row.status = 4
            } else {
              this.$tap.alert(res.message, 'warning')
            }
            this.saveLoading = false
          })
          .catch((err) => {
            this.saveLoading = false
          })
      },
      showEdit(row) {
        if (!row.status) {
          return true
        } else {
          return parseInt(row.status) >= 0
        }
      },
      changePlanTime(row) {
        if (row.planbegintime && row.planendtime && row.planbegintime > row.planendtime) {
          row.planendtime = ''
          this.$tap.alert('计划开始时间应该早于计划完成时间!')
          return
        }
        this.determineTime(this.editTaskList, '', '')
      },
      // 递归判断时间填写是否正确
      determineTime(treeList, parentStart, parentEnd) {
        for (let task of treeList) {
          let start = task.planbegintime
          let end = task.planendtime
          if (start && parentStart) {
            let startTime = new Date(start)
            let parentStartTime = new Date(parentStart)
            if (startTime < parentStartTime) {
              task.planbegintime = ''
              this.$tap.alert('子任务计划开始时间应该晚于主任务计划完成时间!')
              return
            }
          }
          if (end && parentEnd) {
            let endTime = new Date(end)
            let parentEndTime = new Date(parentEnd)
            if (endTime > parentEndTime) {
              task.planendtime = ''
              this.$tap.alert('子任务计划完成时间应该早于主任务计划完成时间!')
              return
            }
          }
          let childrenNodeList = task.children
          if (childrenNodeList && childrenNodeList.length > 0) {
            this.determineTime(childrenNodeList, start, end)
          }
        }
      },
      // 编辑wbs
      editWbs() {
        this.isEdit = true
        this.step = 2
        this.editTaskList = JSON.parse(JSON.stringify(this.taskList))
        // 重新计算序号
        this.addIndex(this.editTaskList, 1, '')
      },
      changeActive(step) {
        this.step = step
      },
      // table行颜色
      doChangeRowClassName({ row, rowIndex }) {
        let color = ''
        if (this.isEdit) {
          if (row.status && parseInt(row.status) < 0) {
            return 'lose-row'
          } else if (row.source === 0 && !row.responsibleusername && row.children.length <= 0) {
            return 'readonly-row'
          } else {
            return color
          }
        }
        if (row[this.$refs.mainTable.rowKey] === this.clickRowkey) {
          return 'row-click'
        }
        this.selectedRowKeys.forEach((key, index) => {
          if (row[this.$refs.mainTable.rowKey] === key) {
            color = topscommConst.tableMulrowSelectedClass
            return false
          }
        })
      },
      // 计算序号
      addIndex(tempList, level, initIndex) {
        let index = 1
        for (let task of tempList) {
          let newInitIndex = level === 1 ? index + '' : initIndex + '.' + index
          this.$set(task, 'index', newInitIndex)
          let childrenTaskList = task.children
          if (childrenTaskList && childrenTaskList.length > 0) {
            this.addIndex(childrenTaskList, level + 1, newInitIndex)
          } else {
            this.$set(task, 'children', [])
          }
          index++
        }
      },
      // 树形list转普通list
      treeTransformList(treeList, list) {
        for (let node of treeList) {
          list.push(node)
          let childrenNodeList = node.children
          node.children = []
          if (childrenNodeList && childrenNodeList.length > 0) {
            this.treeTransformList(childrenNodeList, list)
          }
        }
      },
      transformList(list, type) {
        let tempList = []
        if (type === 'toList') {
          this.treeTransformList(list, tempList)
        } else if (type === 'toTree') {
          this.listTransformTree(tempList, list)
        }
        return tempList
      },
      // 普通list转树形list
      // 使用前清空children
      // for (let i = 0; i < list.length; i++) {
      //     list[i].children = []
      //   }
      listTransformTree(treeList, list) {
        for (let node of list) {
          if (node.code.length <= 1) {
            treeList.push(node)
            continue
          }
          let haveParent = false
          for (let parentNode of list) {
            if (node.parentcode === parentNode.code) {
              parentNode.children.push(node)
              haveParent = true
              break
            }
          }
          if (haveParent === false) {
            treeList.push(node)
          }
        }
      },
      afterLoadData() {
        let tempList = JSON.parse(JSON.stringify(this.datas))
        this.addIndex(tempList, 1, '')
        this.taskList = tempList
      },
      // 显示有效或所有任务
      changeShowValidTask(showValidTask) {
        let tempList = this.transformList(this.editTaskList, 'toList')
        if (showValidTask) {
          tempList = tempList.filter((item) => (!item.status || (item.status >= 0 && item.status !== 4)))
        } else {
          let filterList = this.transformList(this.taskList, 'toList')
          for (let i = 0; i < filterList.length; i++) {
            let list = tempList.filter(item => filterList[i].code === item.code)
            if (list.length > 0) {
              filterList[i] = JSON.parse(JSON.stringify(list[0]))
            }
          }
          tempList = filterList
        }
        for (let i = 0; i < tempList.length; i++) {
          this.$set(tempList[i], 'children', [])
        }
        this.editTaskList = this.transformList(tempList, 'toTree')
        // this.editTaskList = JSON.parse(JSON.stringify(this.filterList))
        this.addIndex(this.editTaskList, 1, '')
      },
      getCircleClass(row) {
        debugger
        switch (row.status) {
          case -2:
            return 'gray'
          case -1:
            return 'gray'
          case 0:
            return 'gray'
          case 1:
            return 'blue'
          case 2:
            return 'blue'
          case 3:
            return 'red'
          case 4:
            return 'red'
          case 5:
            return 'blue'
          case 9:
            return 'green'
          default:
            return ''
        }
      },
      tempBtn() {},
      // 是否可编辑
      isDisabled(item) {
        let key = true
        if (key) {
          return false
        } else {
          return true
        }
      },
      flowSkip() {
        this.$refs.flowSkipRef.visible = true
      },
      openAddLabourTask(type, taskInfo) {
        this.writeSpecialLimit = false
        let jsonParam = JSON.parse(taskInfo.approvalparam)
        if (type === ADD_TASK_SOURCE.NextLevel && jsonParam.hasOwnProperty('editable')) {
          if (jsonParam.editable && taskInfo.children) {
            // 查找当前的子节点是否有特殊任务，有则不许增加特殊任务
            let special = taskInfo.children.findIndex(item => item.type === TASK_TYPE.SPECIAL)
            if (special >= 0) {
              this.writeSpecialLimit = true
            }
          }
        } else if (type === ADD_TASK_SOURCE.SameLevel && jsonParam.hasOwnProperty('editable') && taskInfo.parentcode === '0') {
          // 如果是同级任务，不是最顶级任务，可编辑的节点任务
          if (jsonParam.editable && taskInfo.children) {
            // 查找当前的任务是否是特殊任务
            if (taskInfo.type === TASK_TYPE.GENERAL) {
              this.writeSpecialLimit = true
            }
          }
        }
        this.addSourceType = type
        this.selectInfo = taskInfo
        this.$refs.labourEditRef.isAdd = true
        this.$refs.labourEditRef.visible = true
      },
      openEditLabourTask(taskInfo) {
        this.writeSpecialLimit = false
        let jsonParam = JSON.parse(taskInfo.approvalparam)

        this.addSourceType = ADD_TASK_SOURCE.NextLevel
        this.editTaskInfo = taskInfo
        // 获取父级任务
        let dataArrTemp = JSON.parse(JSON.stringify(this.editTaskList))
        let tempList = this.transformList(dataArrTemp, 'toList')
        tempList = tempList.filter(item => item.code === taskInfo.parentcode)
        if (tempList.length > 0) {
          if (jsonParam.editable && tempList.children) {
            // 查找当前的子节点是否有特殊任务，有则不许增加特殊任务
            let special = tempList.children.findIndex(item => item.type === TASK_TYPE.SPECIAL)
            if (special >= 0 && taskInfo.type === TASK_TYPE.GENERAL) {
              this.writeSpecialLimit = true
            }
          }
          this.selectInfo = tempList[0]
        }
        this.$refs.labourEditRef.isAdd = false
        this.$refs.labourEditRef.visible = true
      },
      insertTaskNode(taskInfo, selectTaskId) {
        if (taskInfo.parentcode === '0') {
          if (selectTaskId) {
            let slliceIndex = this.editTaskList.findIndex(item => item.id === selectTaskId)
            this.editTaskList.splice(slliceIndex + 1, 0, taskInfo)
          } else {
            this.editTaskList.push(taskInfo)
          }
        } else {
          for (let i = 0; i < this.editTaskList.length; i++) {
            this.insertTaskRecursion(this.editTaskList[i], taskInfo.parentcode, taskInfo)
          }
        }
        let dataArrTemp = JSON.stringify(this.editTaskList)
        this.editTaskList = JSON.parse(dataArrTemp)
        this.addIndex(this.editTaskList, 1, '')
      },
      editLabourTaskInfo(taskInfo) {
        let tempList = this.transformList(this.editTaskList, 'toList')
        let slliceIndex = tempList.findIndex(item => item.id === taskInfo.id)
        tempList.splice(slliceIndex, 1, taskInfo)
        this.editTaskList = this.transformList(tempList, 'toTree')
        this.addIndex(this.editTaskList, 1, '')
      },
      insertTaskRecursion(tree, parentCode, newNode) {
        if (!tree.children) {
          tree.children = []
        }
        if (tree.code === parentCode) {
          tree.children.push(newNode)
        } else {
          if (tree.children.length > 0) {
            for (let i = 0; i < tree.children.length; i++) {
              this.insertTaskRecursion(tree.children[i], parentCode, newNode)
            }
          }
        }
      },
      deleteTaskNode(nodeId) {
        for (let i = 0; i < this.editTaskList.length; i++) {
          if (this.editTaskList[i].id === nodeId) {
            this.editTaskList.splice(i, 1)
            return
          } else {
            this.deleteTaskRecursion(this.editTaskList[i], nodeId)
          }
        }
      },
      deleteTaskRecursion(tree, nodeId) {
        if (tree.children) {
          for (let i = 0; i < tree.children.length; i++) {
            if (tree.children[i].id === nodeId) {
              tree.children.splice(i, 1)
              return
            } else {
              this.deleteTaskRecursion(tree.children[i], nodeId)
            }
          }
        }
      }
    },
    computed: {
      showBtn() {
        let key = true
        if (key) {
          return true
        } else {
          return false
        }
      },
      formItemEdit() {
        return (task) => {
          return task.status !== TASK_STATE.Notstart
        }
      },
      planDateEdit() {
        return (task) => {
          return task.status === TASK_STATE.Notstart || ([TASK_STATE.Readystart, TASK_STATE.Running].includes(task.status) && (!task.planbegintime || !task.planendtime))
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .btncolor {
    color: #409EFF;
    border-color: #409EFF
  }
  .tl-table.el-table /deep/ .el-table__body tr.lose-row {
    background-color: rgb(235, 235, 235);
  }

  .tl-table.el-table /deep/ .el-table__body tr.readonly-row {
    background-color: rgb(255, 231, 223);
  }

  .circle-wrapper {
    display: flex;
    align-items: center;
    justify-content: center; /* 水平和垂直方向上都居中对齐 */
  }
  .circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }
  .red {
    @extend .circle;
    background-color: red;
  }
  .green {
    @extend .circle;
    background-color: green;
  }
  .blue {
    @extend .circle;
    background-color: blue;
  }
  .gray {
    @extend .circle;
    background-color: gray;
  }
  .lose {
    @extend .circle;
    background-color: rgb(235, 235, 235);
  }
  .readonly {
    @extend .circle;
    background-color: rgb(255, 231, 223);
  }
  .el-tree /deep/ .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  .el-table /deep/ .el-table__expand-icon--expanded{
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  /*有子节点 且未展开*/
  .el-table /deep/ .el-table__expand-icon .el-icon-arrow-right:before {
    content: '\e783';
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
  }
  /*有子节点 且已展开*/

  .el-table /deep/ .el-table__expand-icon--expanded .el-icon-arrow-right:before {
    content: '\e781';
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
  }

  /*没有子节点*/
  .el-table /deep/ .el-table__placeholder::before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
  }
</style>

